<template>
  <a-card :bordered="false">
    <h3>素材库选择素材</h3>
    <screen
      ref="screen"
      :productVisible.sync="productVisible"
      :productList="productList"
      @onSearch="onSearch"></screen>
    <s-table
      ref="table"
      size="default"
      :rowKey="record => record.lookId"
      :columns="columns"
      :data="loadData"
      :pagination="paginationProps"
      :scroll="{ x: 1300 }"
    >
       <span class="img-wrapper" slot="productImage" slot-scope="text, record, index">
        <div class="img-list">
          <img class="img" v-for="(item, index) in record.lookUrlList.slice(0,3)" :src="item" alt="" @click="handleShowImg(index, record.lookUrlList)" :key="index">
        </div>
        <div class="img-text">共{{record.lookUrlList.length}}张</div>
      </span>
      <span slot="remarks" slot-scope="record">
        <a-popover :overlayStyle="{ width: '240px', height: 'auto' }">
          <template slot="content">
            <p style="word-break: break-all;">{{ record.content }}</p>
          </template>
          <span class="remarks">{{ record.content }}</span>
        </a-popover>
      </span>
      <span class="product-list" slot="productList" slot-scope="text, record, index">
        <div class="product-item" v-for="(item, index) in record.productList.slice(0,3)" :key="index">{{`${item.productNo || ''}（${item.year || ''}年/${item.band || ''}/${item.season || ''}）`}}</div>
        <div class="product-num" @click="handleShowCurrentProductList(record.productList)">共{{record.productList.length}}款 ></div>
      </span>
      <span slot="state" slot-scope="record">
        <span v-if="record.state == 0">可同步</span>
        <span v-if="record.state == 1">已同步</span>
        <span v-if="record.state == 2">不可同步</span><br>
        <span v-if="record.state == 2" style="color: red;">(微商城禁售/未上架搭配内全部商品)</span>
      </span>
      <span class="from-wrapper" slot="from" slot-scope="text, record, index">
        <div>
          <a-tooltip v-if="false">
            <template slot="title">
              该套搭配内搭配图不允许和商品搭配展示，系统已自动禁用该套搭配，请及时在微盟后台修改
            </template>
            <a-icon type="exclamation-circle" style="color: #FE6311;margin-right: 4px;" theme="filled" />
            </a-tooltip>{{record.type}}
        </div>
        <div style="color: #999;" v-if="record.type == '零售素材' || record.type == '导购素材'">({{record.sonType}})</div>
      </span>
      <span slot="action" slot-scope="record">
        <a @click="handleDetails(record.lookId, record.state)">详情</a><br>
        <a @click="handleSynchronization(record.lookId, record.state)" v-if="record.state != 2">同步至微商城</a>
      </span>
    </s-table>
    <ParagraphPic :current="imgCurrent" :visible.sync="imgVisible" :imgs="imgs"></ParagraphPic>
  </a-card>
</template>
<script>
  import { materialLook } from '@/api/micromall/materialTools'
  import { STable } from '@/views/box/components'
  import Screen from '../../components/MaterialToolsScreen'
  import ParagraphPic from '../../components/ParagraphPic'

  const columns = [
    {
      title: '搭配图',
      width: '200px',
      align: 'center',
      scopedSlots: { customRender: 'productImage' }
    },
    {
      title: '内容文案',
      width: '180px',
      align: 'center',
      scopedSlots: { customRender: 'remarks' }
    },
    {
      title: '内含商品',
      width: '180px',
      align: 'center',
      scopedSlots: { customRender: 'productList' }
    },
    {
      title: '状态',
      width: '120px',
      align: 'center',
      scopedSlots: { customRender: 'state' }
    },
    {
      title: '来源',
      width: '120px',
      align: 'center',
      scopedSlots: { customRender: 'from' }
    },
    {
      title: '操作',
      width: '120px',
      align: 'center',
      fixed: 'right',
      scopedSlots: { customRender: 'action' }
    }
  ]
  export default {
    components: {
      Screen,
      STable,
      ParagraphPic
    },
    data() {
      return {
        productVisible: false,
        imgCurrent: 0,
        imgVisible: false,
        imgs: [],
        productList: [],
        brandList: [
          {
            name: 'JNBY',
            weid: '2738574294'
          },
          {
            name: 'LESS',
            weid: '2822095692'
          },
          {
            name: '速写',
            weid: '2504948039'
          },
          {
            name: 'jnbybyJNBY',
            weid: '4'
          },
          {
            name: '奥莱',
            weid: '11'
          },
          {
            name: '江南布衣+',
            weid: '5'
          },
          {
            name: '蓬马',
            weid: '6924108367'
          },
          {
            name: 'APN',
            weid: '15'
          },
          {
            name: 'JNBYHOME',
            weid: '8348044436'
          }
        ],
        activeKey: '2738574294',
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        columns,
        paginationProps: {
          total: 0,
          showTotal: total => `共有 ${total} 条数据`
          // onShowSizeChange: (current, pageSize) => this.changePageSize(current, pageSize)
        },
        queryParam: {},

        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          const data = {
            ...this.queryParam,
            pageNo: parameter.pageNo,
            pageSize: parameter.pageSize,
            brandId: this.$route.params.id
          }
          return materialLook(data).then(res => {
            if (res.code === 200) {
              const { materialList, page } = res.data
              const data = {
                page,
                data: materialList
              }
              return data
            } else {
              this.$message.error(res.msg)
              const data = {
                page: {
                  count: 0,
                  pageNo: 0,
                  pages: 0
                },
                data: []
              }
              return data
            }
          })
        }
      }
    },
    created() {
    },
    computed: {},
    mounted() {
    },
    watch: {
      $route(to, from) {
        const whiteList = [
          '/micromall/community/materialTools/details',
          '/micromall/community/materialTools/synchronization'
        ]
        const currentPathBase = '/micromall/community/materialTools/brandMaterial'
        const currentPath = this.$route.path
        if (this.checkRoute(from.path, whiteList) && to.path.includes(currentPathBase)) {
          this.$refs.table.refresh() // 刷新当前列表（记录上次页码）
        } else {
          if (currentPath.includes(currentPathBase) ) {
            this.$refs.screen.reset() // 刷新当前页面
          }
        }
      }
    },
    methods: {
      checkRoute(fromPath, routeArr) {
        for (let i = 0; i < routeArr.length; i++) {
          if (fromPath.includes(routeArr[i])) {
            return true
          }
        }
        return false
      },

      //搭配内商品
      handleShowCurrentProductList(list) {
        this.productList = list
        this.productVisible = true
      },

      // 同步至微商城
      handleSynchronization(lookId, state) {
        this.$router.push(`/micromall/community/materialTools/synchronization/${this.$route.params.id}?lookId=${lookId}&state=${state}`)
      },

      // 详情
      handleDetails(lookId, state) {
        this.$router.push(`/micromall/community/materialTools/details/${this.$route.params.id}?lookId=${lookId}&state=${state}`)
      },

      // 查看大图
      handleShowImg(index, productImgList){
        this.imgCurrent = index
        this.imgVisible = true
        this.imgs= productImgList
     },

      //查询
      onSearch(obj) {
        this.queryParam = obj
        this.$refs.table.refresh(true)
      }
    }
  }
</script>
<style lang="less" scoped>
  /deep/ .ant-tabs-bar {
    margin-bottom: 0;
  }

  .img-wrapper {
    display: flex;
    justify-content: space-between;

    .img-list {
      display: flex;
    }

    .img-text {
      line-height: 60px;
      color: #999;
    }
  }

  .img {
    display: block;
    margin: 0 2px;
    width: 60px;
    height: 60px;
    border: 1px dashed #f5f5f5;
    object-fit: scale-down;
    cursor: pointer;
  }

  .remarks {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    word-break: break-all; /* 追加这一行代码 */
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
  }
  .product {
    display: flex;
    overflow: hidden;
    .img{
      margin: 0;
    }
    .product-name{
      flex: 1;
      margin-left: 5px;
      width: 80px;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      word-break: break-all; /* 追加这一行代码 */
      /* autoprefixer: off */
      -webkit-box-orient: vertical;
      /* autoprefixer: on */
    }
  }
  .product-list {
    .product-item {
      line-height: 18px;
      text-align: left;
    }

    .product-num {
      cursor: pointer;
      text-align: left;
    }
  }
</style>
